import React, {Component} from "react";

export default class Cell extends Component {

    handleClick() {
        // 点击单元格的时候会执行这个函数
        // console.log(this.props.row + "-" + this.props.col);
        if (this.props.value !== 0) {
            return;
        }

        this.props.playChess(this.props.row,this.props.col);
    }

    render() {
        // 这里需要做判断，根据不同位置展示不同的单元格
        // 我们需要知道这个单元格的坐标
        const {row, col,value} = this.props;
        // 第一行不显示顶部
        let colStyle = {}
        let rowStyle = {}
        if (row === 0) {
            colStyle.height = "50%";
            colStyle.top = "50%"
        }
        if (col === 0) {
            rowStyle.width = "50%";
            rowStyle.left = "50%"
        }

        if (row === 14) {
            colStyle.height = "50%";
        }

        if (col === 14) {
            rowStyle.width = "50%";
        }

        console.log(value)

        return (
            <div className="cell" onClick={this.handleClick.bind(this)}>
                <div className="row" style={rowStyle}></div>
                <div className="col" style={colStyle}></div>
                {
                    value !== 0 &&
                    <div className="ball" style={{backgroundColor:value == 1?'black':'white'}}></div>
                }
            </div>
        );
    }
};